<template>
   
      <el-input v-model="uid" placeholder="Enter your UID" />
      <el-input v-model="toUid" placeholder="Enter the recipient's UID" /><br>
      <el-button @click="connectWebSocket">Connect to WebSocket</el-button>
      <el-button @click="disconnectWebSocket">Disconnect</el-button>
    <el-scrollbar  id="chatContainer" style="max-height: 300px;">
        <div v-for="(message, index) in messages" :key="index" :class="messageClass(message.from)">
            {{ message.content }}
        </div>
    </el-scrollbar>
      <el-input v-model="message" placeholder="Type your message" />
      <el-select v-model="customType">
        <el-option label="发送" value="1" />
        <el-option label="拉取历史信息" value="2" />
        <el-option label="拉取未读信息" value="3" />
        <el-option label="AI接入" value="4" />
      </el-select>
      <el-button @click="sendMessage">Send</el-button>
  
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue'
  import axios from 'axios';
  
 
      const uid = ref('')
      const toUid = ref('')
      const messages = ref([])
      const message = ref('')
      const customType = ref('1')
      let websocket = null
      let token = "1122"
  
  
      const connectWebSocket = () => {
        websocket = new WebSocket(`ws://127.0.0.1:3000/ws?token=${token}&uid=${uid.value}&toUid=${toUid.value}`)
  
        websocket.addEventListener("open", (event) => {
          addMessage("Connected to WebSocket server", "system")
        })
  
        websocket.addEventListener("message", (event) => {
          const data = JSON.parse(event.data)
          addMessage(data.Content, data.from)
        })
  
        websocket.addEventListener("close", (event) => {
          addMessage("Connection closed", "system")
        })
      }
  
      const disconnectWebSocket = () => {
        if (websocket) {
          websocket.close()
          console.log(messages.value)
          addMessage("Disconnected from WebSocket server", "system")
        }
      }
  
      const sendMessage = () => {
        if (websocket) {
          const jsonMessage = {
            content: message.value,
            type: Number(customType.value),
          }
          websocket.send(JSON.stringify(jsonMessage))
          addMessage("我：" + message.value, uid.value)
          message.value = ''
        }
      }
  
      const addMessage = (content, from) => {
        if (content) {
          messages.value.push({ content , from }  as never)
          nextTick(() => {
            const chatContainer = document.getElementById('chatContainer')
            chatContainer.scrollTop = chatContainer.scrollHeight
          })
        }
      }
  
      const messageClass = (from) => {
        return from === uid.value ? "senderMessage" : "receiverMessage"
      }
  

    
  
  </script>
  
  <style>
  #app {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  #chatContainer {
    border: 1px solid #ddd;
    padding: 10px;

    background-color: #fafafa;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  
  .senderMessage {
    background-color: #dcf8c6;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 12px;
    max-width: 70%;
    word-break: break-word;
    margin-left: auto;
  }
  
  .receiverMessage {
    background-color: #e3e3e3;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 12px;
    max-width: 70%;
    word-break: break-word;
  }
  </style>